﻿$(function () {
    function getId(id) {
        return document.getElementById(id);
    }

    // 绑定展示事件
    function bindClickShow(clickSelector, showSelector) {
        $(clickSelector).click(function () {
            $(showSelector).show();
        });
    }
    var $save = $('#save');

    function saveData(model, viewModel) {
        var viewModel = window[viewModel];
        window[model] = ko.mapping.toJS(viewModel); // 保存后设置新的data
    }

    function cancelData(model, viewModel) {
        var model = window[model];
        var viewModel = window[viewModel];
        ko.mapping.fromJS(model, viewModel); // 还原旧的data
    }

    $('.editable').on('click', '.showEdit', function () { // 编辑
        var $editable = $(this).closest('.editable');
        $editable.find('.whenEditShow').show();
        $editable.find('.whenEditHide').hide();
    });

    $('.editable').on('click', '.cancelEdit', function () { // 取消
        var $editable = $(this).closest('.editable');
        $editable.find('.whenEditShow').hide();
        $editable.find('.whenEditHide').show();
        cancelData($editable.data('model'), $editable.data('viewmodel'));
    });

    $('.editable').on('click', '.saveEdit', function () { // 保存
        var $editable = $(this).closest('.editable');
        var viewModel = window[$editable.data('viewmodel')];
        var model = ko.mapping.toJS(viewModel);
        window.getData = function () { return model; };
        window.savedCallback = function () {
            $editable.find('.whenEditShow').hide();
            $editable.find('.whenEditHide').show();
            saveData($editable.data('model'), $editable.data('viewModel'));
        }
        $save.data('url', $editable.data('url'));
        $save.click();
    });

    $('.editable .saveEdit').addClass('point');
    $('.editable .showEdit').addClass('point');
    $('.editable .cancelEdit').addClass('point');

    // => start models 

    // company names
    window.CompanyNamesModel = {
        Name: '上海全明星网络科技有限公司',
        ShortName: '全明星',
    }

    // about us
    window.AboutUsModel = {
        AboutUs: '乐秀(VideoShow)自2014年上架GooglePlay应用市场以来，依靠用户口碑传播，全球累计下载超过7000万，收获100多万个五星好评，在50多个国家分类排名前十，每月独立活跃用户将近千万 产品以手机视频编解码方案为核心技术，从拍摄、编辑、播放多方面满足用户需求，并提供分享、竞赛、推荐等交流平台。目前通过广告展示、付费下载等方式有节制地变现，已实现盈亏平衡。乐秀(VideoShow)自2014年上架GooglePlay应用市场以来，依靠用户口碑传播，全球累计下载超过7000万，收',
    }

    // advantage
    window.AdvantageModel = {
        Advantage: '乐秀(VideoShow)自2014年上架GooglePlay应用市场以来，依靠用户口碑传播，全球累计下载超过7000万，收获100多万个五星好评，在50多个国家分类排名前十，每月独立活跃用户将近千万 产品以手机视频编解码方案为核心技术，从拍摄、编辑、播放多方面满足用户需求，并提供分享、竞赛、推荐等交流平台。目前通过广告展示、付费下载等方式有节制地变现，已实现盈亏平衡'
    }

    window.ProductsModel = [
        {
            Id: '1',
            Name: '产品名称', // 产品名称
            Url: '链接', // 链接
            Description: '描述', // 描述
            ImagePath: 'images/pic/compro01.jpg', // 产品照片
            NewImage: '新产品照片', // 新产品照片
            IsNew: false,
        },
        {
            Id: '2',
            Name: '产品名称2', // 产品名称
            Url: '链接2', // 链接
            Description: '描述2', // 描述
            ImagePath: 'images/pic/compro01.jpg', // 产品照片
            NewImage: '新产品照片2', // 新产品照片
            IsNew: false,
        },
    ];


    var productModel = {
        Id: '',
        Name: '链接', // 产品名称
        Url: '', // 链接
        Description: '21212', // 描述
        ImagePath: '', // 产品照片
        NewImage: 'images/pic/compro01.jpg', // 新产品照片
        IsNew: true,
    };
    window.ProductViewModel = ko.mapping.fromJS(productModel);
    ko.applyBindings(window.ProductViewModel, getId('companyProEdit'));

    function initProductEdit() {
        ko.mapping.fromJS(productModel, window.ProductViewModel);
        $('#productName').focus();
    }

    window.ProductsViewModel = function () {
        var self = this;

        self.products = ko.observableArray(window.ProductsModel);

        self.addProduct = function () {
            self.products.push(ko.mapping.toJS(window.ProductViewModel));
            initProductEdit();
        }

        self.removeProduct = function () {
            self.products.remove(this);
        }

        self.editProduct = function () {
            ko.applyBindings(this, getId('companyProEdit'));
        }
    }
    ko.applyBindings(window.ProductsViewModel, getId('products'));

    $('#createProduct').click(function () {
        initProductEdit();
    });

    $('#saveProduct').click(function () {
        if (window.ProductViewModel.IsNew()) {
            // TODO: add product server
            $('#addProduct').click();
        } else {
            // TODO: update product server;
        }
    });

    $('#delProduct').click(function () {
        if (window.ProductViewModel.IsNew()) {
            initProductEdit();
        } else {
            // TODO: del product server            
        }
    });
    // => end models

    // => start binds
    $('.editable').each(function () {
        $this = $(this);
        window[$this.data('viewmodel')] = ko.mapping.fromJS(window[$this.data('model')]);
    });

    $('.editable').each(function () {
        var viewModel = window[$(this).data('viewmodel')];
        ko.applyBindings(viewModel, $(this)[0]);
    });

    // => end binds
});

$(function () {

});